<template>
  <div class="container">
    <Header @bell-click="handleBellClick" @shift-click="showHandoverDialog = true" />
    <div class="top">
      <div class="item">
        <div class="item-left">
          <img class="item-left-img" src="@/assets/images/ysje.png" alt="" />
          <div class="item-label">营收金额</div>
        </div>
        <div class="item-right">
          <span class="item-num">4628.32</span>
          <span class="item-unit">万元</span>
        </div>
      </div>
      <div class="item">
        <div class="item-left">
          <img class="item-left-img" src="@/assets/images/hkje.png" alt="" />
          <div class="item-label">回款金额</div>
        </div>
        <div class="item-right">
          <span class="item-num">4628.32</span>
          <span class="item-unit">万元</span>
        </div>
      </div>
      <div class="item">
        <div class="item-left">
          <img class="item-left-img" src="@/assets/images/yhsl.png" alt="" />
          <div class="item-label">用户数量</div>
        </div>
        <div class="item-right">
          <span class="item-num">4628.32</span>
          <span class="item-unit">个</span>
        </div>
      </div>
      <div class="item">
        <div class="item-left">
          <img class="item-left-img" src="@/assets/images/sjsl.png" alt="" />
          <div class="item-label">商家数量</div>
        </div>
        <div class="item-right">
          <span class="item-num">4628.32</span>
          <span class="item-unit">个</span>
        </div>
      </div>
      <div class="item">
        <div class="item-left">
          <img class="item-left-img" src="@/assets/images/skusl.png" alt="" />
          <div class="item-label">SKU数量</div>
        </div>
        <div class="item-right">
          <span class="item-num">4628.32</span>
          <span class="item-unit">个</span>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="item-1">
        <div class="tab-box">业绩达成</div>

        <!-- <div class="tabs">
          <div
            v-for="tab in tabs1"
            :key="tab"
            class="tab-item"
            :class="{ active: activeTab1 === tab }"
            @click="handleTabClick1(tab)"
          >
            {{ tab }}
          </div>
        </div> -->
        <!-- <div class="radio-box">
          <div class="radio-label">营收达成率</div>
          <div class="native-select-wrapper">
            <select v-model="dimension" class="native-select">
              <option value="month">月</option>
              <option value="season">季</option>
              <option value="year">年</option>
            </select>
          </div>
        </div> -->
        <div class="radio-chart-box">
          <VChart :options="radioChartOptions" />
        </div>

        <div class="check-box">
          <div class="left">
            <div
              @click="handleDimension('month')"
              :class="['btn', { 'btn-active': dimension === 'month' }]"
            >
              月
            </div>
            <div
              @click="handleDimension('season')"
              :class="['btn', { 'btn-active': dimension === 'season' }]"
            >
              季
            </div>
            <div
              @click="handleDimension('year')"
              :class="['btn', { 'btn-active': dimension === 'year' }]"
            >
              年
            </div>
          </div>
          <div class="right">
            <div @click="handleRatio('OY')" :class="['btn', { 'btn-active': ratio === 'OY' }]">
              同比
            </div>
            <div @click="handleRatio('QOQ')" :class="['btn', { 'btn-active': ratio === 'QOQ' }]">
              环比
            </div>
          </div>
        </div>
        <div class="report-chart-box">
          <VChart :options="reportChartOptions" />
        </div>
      </div>
      <div class="item-2">
        <div class="tabs">
          <div
            v-for="tab in tabs2"
            :key="tab"
            class="tab-item"
            :class="{ active: activeTab2 === tab }"
            @click="handleTabClick2(tab)"
          >
            {{ tab }}
          </div>
        </div>
        <div class="map-chart-box">
          <ChinaMap :geoJson="GeoJson" :deData="deData" />
        </div>
      </div>
      <div class="item-3">
        <!-- <div class="tabs">
          <div
            v-for="tab in tabs3"
            :key="tab"
            class="tab-item"
            :class="{ active: activeTab3 === tab }"
            @click="handleTabClick3(tab)"
          >
            {{ tab }}
          </div>
        </div> -->

        <div class="tab-box">每月新增客户量统计</div>
        <div class="add-chart-box">
          <VChart :options="addNewCustomerChartOptions" />
        </div>

        <div class="tab-box">新增供应商数量统计</div>
        <div class="add-chart-box">
          <VChart :options="addNewSupplierChartOptions" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Header from '@/components/Header.vue'
import ChinaMap from '@/components/ChinaMap.vue'
import { GeoJson } from '@/assets/geoJson'

const dimension = ref('month')
const handleDimension = async (val) => {
  dimension.value = val
}

const ratio = ref('OY')
const handleRatio = (val) => {
  ratio.value = val
}
const deData = {}
const activeTab1 = ref('营收')
const tabs1 = ['营收', '回款']
const activeTab2 = ref('成交额')
const tabs2 = ['成交额', '用户数']
const activeTab3 = ref('客户')
const tabs3 = ['客户', '供应数']

function handleTabClick1(tab) {
  activeTab1.value = tab
}
function handleTabClick2(tab) {
  activeTab2.value = tab
}
function handleTabClick3(tab) {
  activeTab3.value = tab
}
const radioChartOptions = ref({
  series: [
    {
      type: 'gauge',
      startAngle: 90,
      endAngle: -270,
      progress: {
        show: true,
        overlap: false,
        roundCap: true,
        clip: false,
        itemStyle: {
          color: '#4de8e8',
        },
      },
      axisLine: {
        lineStyle: {
          width: 18,
          color: [
            [0.8, '#4de8e8'],
            [1, '#222b4a'],
          ],
        },
      },
      splitLine: {
        distance: -18,
        length: 18,
        lineStyle: {
          width: 2,
          color: '#222b4a',
        },
      },
      axisTick: { show: false },
      axisLabel: { show: false },
      pointer: { show: false },
      anchor: { show: false },
      detail: {
        valueAnimation: true,
        formatter: ['{value|80%}', '{name|完成率}'].join('\n'),
        rich: {
          value: {
            color: '#4de8e8',
            fontSize: 28,
            fontWeight: 'bold',
            fontFamily: 'Digital, monospace',
          },
          name: {
            color: '#fff',
            fontSize: 16,
            fontWeight: 'normal',
            padding: [8, 0, 0, 0],
          },
        },
        offsetCenter: [0, '0%'],
      },
      data: [
        {
          value: 80,
          name: '完成率',
        },
      ],
    },
  ],
})

const reportChartOptions = ref({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999',
      },
    },
  },
  legend: {
    data: ['实际', '指标', '达成率', '增长率'],
    textStyle: {
      color: 'rgba(255, 255, 255, 0.8)',
    },
    bottom: '0%',
  },
  xAxis: [
    {
      type: 'category',
      data: ['01-01', '01-02', '01-03', '01-04', '01-05', '01-06', '01-07'],
      axisPointer: {
        type: 'shadow',
      },
      axisLabel: {
        color: 'rgba(255, 255, 255, 0.8)',
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.8)',
        },
      },
      // splitLine: {
      //   show: true,
      //   lineStyle: {
      //     color: 'rgba(255, 255, 255, 0.8)',
      //   },
      // },
    },
  ],
  grid: {
    left: '3%',
    right: '4%',
    bottom: '13%',
    top: '15%',
    containLabel: true,
  },
  yAxis: [
    {
      type: 'value',
      name: '实际（万元）',
      nameTextStyle: {
        color: 'rgba(255, 255, 255, 0.8)',
      },
      min: 0,
      max: 250,
      interval: 50,
      axisLabel: {
        formatter: '{value}',
        color: '#fff',
      },
      axisTick: {
        lineStyle: {
          type: 'dashed',
        },
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: 'rgba(255, 255, 255, 0.2)',
        },
      },
    },
    {
      type: 'value',
      name: '指标（万元）',
      nameTextStyle: {
        color: 'rgba(255, 255, 255, 0.8)',
      },
      min: 0,
      max: 25,
      interval: 5,
      axisLabel: {
        formatter: '{value}',
        color: '#fff',
      },
      axisTick: {
        lineStyle: {
          type: 'dashed',
        },
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: 'rgba(255, 255, 255, 0.2)',
        },
      },
    },
  ],
  series: [
    {
      name: '实际',
      type: 'bar',
      tooltip: {
        valueFormatter: function (value) {
          return value + ' 万元'
        },
      },
      color: 'blue',
      data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
    },
    {
      name: '指标',
      type: 'bar',
      tooltip: {
        valueFormatter: function (value) {
          return value + ' 万元'
        },
      },
      color: '#76fbcc',
      data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
    },
    {
      name: '达成率',
      type: 'line',
      yAxisIndex: 1,
      tooltip: {
        valueFormatter: function (value) {
          return value + '%'
        },
      },
      color: '#c97779',
      data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
    },
    {
      name: '增长率',
      type: 'line',
      yAxisIndex: 1,
      tooltip: {
        valueFormatter: function (value) {
          return value + '%'
        },
      },
      color: '#76ab5b',
      data: [1.0, 3.2, 5.3, 7.5, 2.3, 8.2, 21.3, 26.4, 27.0, 19.5, 11.0, 16.2],
    },
  ],
})

const addNewCustomerChartOptions = ref({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999',
      },
    },
  },
  // toolbox: {
  //   feature: {
  //     dataView: { show: true, readOnly: false },
  //     magicType: { show: true, type: ['line', 'bar'] },
  //     restore: { show: true },
  //     saveAsImage: { show: true },
  //   },
  // },
  legend: {
    data: ['新增客户数量', '环比趋势'],
    textStyle: {
      color: 'rgba(255, 255, 255, 0.8)',
    },
  },
  grid: {
    left: '7%',
    right: '4%',
    bottom: '3%',
    top: '25%',
    containLabel: true,
  },
  xAxis: [
    {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisPointer: {
        type: 'shadow',
      },
      axisLabel: {
        color: 'rgba(255, 255, 255, 0.8)',
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.8)',
        },
      },
    },
  ],
  yAxis: [
    {
      type: 'value',
      name: '新增客户数量（个）',
      min: 0,
      max: 250,
      interval: 50,
      nameTextStyle: {
        color: 'rgba(255, 255, 255, 0.8)',
      },
      axisLabel: {
        formatter: '{value}',
        color: '#fff',
      },
      color: '#5b9bd5',
      axisTick: {
        lineStyle: {
          type: 'dashed',
        },
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: 'rgba(255, 255, 255, 0.2)',
        },
      },
    },
    {
      type: 'value',
      name: '环比趋势（%）',
      min: 0,
      max: 25,
      interval: 5,
      nameTextStyle: {
        color: 'rgba(255, 255, 255, 0.8)',
      },
      axisLabel: {
        formatter: '{value}',
        color: '#fff',
      },
      axisTick: {
        lineStyle: {
          type: 'dashed',
        },
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: 'rgba(255, 255, 255, 0.2)',
        },
      },
    },
  ],
  series: [
    {
      name: '新增客户数量',
      type: 'bar',
      tooltip: {
        valueFormatter: function (value) {
          return value + '个'
        },
      },
      color: '#5b9bd5',
      data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
    },
    {
      name: '环比趋势',
      type: 'line',
      yAxisIndex: 1,
      tooltip: {
        valueFormatter: function (value) {
          return value + '%'
        },
      },
      color: '#ec7d31',
      data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
    },
  ],
})

const addNewSupplierChartOptions = ref({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999',
      },
    },
  },
  // toolbox: {
  //   feature: {
  //     dataView: { show: true, readOnly: false },
  //     magicType: { show: true, type: ['line', 'bar'] },
  //     restore: { show: true },
  //     saveAsImage: { show: true },
  //   },
  // },
  legend: {
    data: ['新增供应商', '环比趋势'],
    textStyle: {
      color: 'rgba(255, 255, 255, 0.8)',
    },
  },
  grid: {
    left: '7%',
    right: '4%',
    bottom: '3%',
    top: '25%',
    containLabel: true,
  },
  xAxis: [
    {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisPointer: {
        type: 'shadow',
      },
      axisLabel: {
        color: 'rgba(255, 255, 255, 0.8)',
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.8)',
        },
      },
    },
  ],
  yAxis: [
    {
      type: 'value',
      name: '新增供应商（个）',
      min: 0,
      max: 250,
      interval: 50,
      nameTextStyle: {
        color: 'rgba(255, 255, 255, 0.8)',
      },
      axisLabel: {
        formatter: '{value}',
        color: '#fff',
      },
      color: '#5b9bd5',
      axisTick: {
        lineStyle: {
          type: 'dashed',
        },
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: 'rgba(255, 255, 255, 0.2)',
        },
      },
    },
    {
      type: 'value',
      name: '环比趋势（%）',
      min: 0,
      max: 25,
      interval: 5,
      nameTextStyle: {
        color: 'rgba(255, 255, 255, 0.8)',
      },
      axisLabel: {
        formatter: '{value}',
        color: '#fff',
      },
      axisTick: {
        lineStyle: {
          type: 'dashed',
        },
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: 'rgba(255, 255, 255, 0.2)',
        },
      },
    },
  ],
  series: [
    {
      name: '新增供应商',
      type: 'bar',
      tooltip: {
        valueFormatter: function (value) {
          return value + '个'
        },
      },
      color: '#5b9bd5',
      data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
    },
    {
      name: '环比趋势',
      type: 'line',
      yAxisIndex: 1,
      tooltip: {
        valueFormatter: function (value) {
          return value + '%'
        },
      },
      color: '#ec7d31',
      data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
    },
  ],
})
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.container {
  background-image:
    url('../assets/images/top_bg.png'), url('../assets/images/bottom_bg.png'),
    url('../assets/images/left_bg.png'), url('../assets/images/right_bg.png'),
    url('../assets/images/base_bg.png');
  background-position:
    center top,
    center bottom,
    left center,
    right center,
    center center;
  background-repeat: no-repeat;
  background-size:
    100% 10%,
    100% 10%,
    20% 100%,
    20% 100%,
    100% 100%;
  width: 100vw;
  height: 100vh;
  padding: 1vh 1.5vw;
  display: flex;
  flex-direction: column;
  align-items: center;

  .top {
    margin-top: 10vh;
    width: 100vw;
    height: 19vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1vh 1.5vw;
    box-sizing: border-box;
    margin-bottom: 2vh;

    .item {
      position: relative;
      width: 19%;
      height: 19vh;
      background: rgba(20, 40, 80, 0.7);
      border-radius: 10px;
      box-shadow:
        0 0 10px #00eaff,
        0 0 0 1px #00eaff inset;
      overflow: hidden;
      padding: 1vh 1.5vw;
      display: flex;

      .item-left {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        position: relative;
        height: 100%;
        width: 50%;

        .item-left-img {
          padding: 10%;
          width: 100%;
          height: 80%;
        }
      }

      .item-right {
        width: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 1vh;
        align-items: center;
        position: relative;
        height: 100%;
      }

      .item-num {
        font-family: 'Digital', monospace;
        font-size: 1.8vw;
        color: #5ecbff;
        margin-left: 1vw;
        letter-spacing: 2px;
      }

      .item-unit {
        font-size: 1.2vw;
        color: #fff;
        margin-left: 0.5vw;
        align-self: center;
        font-family: DOUYU, serif;
      }

      .item-label {
        position: absolute;
        bottom: 0vw;
        font-size: 1.3vw;
        color: #fff;
        font-family: DOUYU, serif;
        letter-spacing: 2px;
        text-shadow: 0 0 4px #000;
      }
    }
  }

  .bottom {
    width: 100vw;
    height: 65vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1.5vw;
    gap: 0.5vw;
    box-sizing: border-box;
    // background-color: hotpink;

    .item-1 {
      width: 25%;
      height: 100%;
      padding: 2vh 1.5vw 1vh;
      background: rgba(20, 40, 80, 0.7);
      border-radius: 10px;
      box-shadow:
        0 0 10px #00eaff,
        0 0 0 1px #00eaff inset;

      // .radio-box {
      //   display: flex;
      //   align-items: center;
      //   justify-content: space-between;
      //   width: 100%;
      //   height: 6vh;

      //   .radio-label {
      //     padding-left: 2vw;
      //     font-size: 1.25vw;
      //     font-family: DOUYU, serif;
      //     color: #fff;
      //   }

      //   .native-select-wrapper {
      //     pointer-events: auto;
      //     width: 8vw;

      //     &::after {
      //       content: '';
      //       position: absolute;
      //       top: 50%;
      //       right: 10px;
      //       transform: translateY(-50%);
      //       width: 0;
      //       height: 0;
      //       border-left: 5px solid transparent;
      //       border-right: 5px solid transparent;
      //       border-top: 5px solid #00a0e9;
      //       pointer-events: auto;
      //     }

      //     .native-select {
      //       width: 100%;
      //       appearance: none;
      //       -webkit-appearance: none;
      //       -moz-appearance: none;
      //       background-color: rgba(0, 49, 80, 0.8);
      //       color: #fff;
      //       padding: 6px 30px 6px 10px;
      //       border: 1px solid #00a0e9;
      //       border-radius: 4px;
      //       font-size: 0.7vw;
      //       cursor: pointer;
      //       outline: none;
      //       box-sizing: border-box;
      //       font-size: 0.73vw;

      //       &:hover {
      //         border-color: #00c1de;
      //       }

      //       &:focus {
      //         border-color: #00c1de;
      //         box-shadow: 0 0 0 2px rgba(0, 193, 222, 0.2);
      //       }

      //       option {
      //         background-color: #001a33;
      //         color: #fff;
      //         padding: 8px;
      //       }
      //     }
      //   }
      // }
      .check-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 45%;

          .btn {
            width: 32%;
          }
        }
        .right {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 32%;

          .btn {
            width: 47%;
          }
        }

        .btn {
          background-color: #e9e9e9;
          border-radius: 5px;
          text-align: center;
          cursor: pointer;
        }
        .btn-active {
          background-color: #fd9900;
          color: #fff;
        }
      }

      .radio-chart-box {
        width: 100%;
        height: 20vh;
      }

      .report-chart-box {
        width: 100%;
        height: 33vh;
        // background: hotpink;
      }
    }
    .item-2 {
      width: 50%;
      height: 100%;
      padding: 1vh 1.5vw;
      background: rgba(20, 40, 80, 0.7);
      border-radius: 10px;
      box-shadow:
        0 0 10px #00eaff,
        0 0 0 1px #00eaff inset;

      .map-chart-box {
        width: 100%;
        height: 57vh;
        // background-color: hotpink;
      }
    }

    .item-3 {
      width: 25%;
      height: 100%;
      padding: 1vh 1.5vw;
      background: rgba(20, 40, 80, 0.7);
      border-radius: 10px;
      box-shadow:
        0 0 10px #00eaff,
        0 0 0 1px #00eaff inset;

      .tab-box {
        margin-top: 1vh;
      }

      .add-chart-box {
        width: 100%;
        height: 25vh;
      }
    }
  }
}

.tabs {
  display: flex;
  .tab-item {
    flex: 1;
    text-align: center;
    padding: 1vh 0;
    color: #fff;
    font-size: 1.2vw;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    background: linear-gradient(180deg, #0a2342 0%, #174a6e 100%);
    transition:
      background 0.2s,
      color 0.2s;
    font-family: DOUYU, serif;

    &.active {
      color: #00eaff;
      border-bottom: 2px solid #00eaff;
      background: rgba(0, 234, 255, 0.1);
    }
  }
}

.tab-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80%;
  height: 5vh;
  font-family: DOUYU, serif;
  background: url('../assets/images/name_bg.png');
  background-size: 100% 100%;
  color: #fff;
  font-size: 1.2vw;
  margin: auto;
  letter-spacing: 2px;
}
</style>
